<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" ng-app>
<head>
    <meta charset="UTF-8"/>
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/favicon.ico}"/>

    <title>authorization_code . MyOIDC[RP]</title>

    <th:block th:include="fragment/header :: public-css"/>

    <script src="../static/angular.min.js" th:src="@{'/angular.min.js'}"></script>
</head>
<body>

<div th:replace="fragment/header :: public-header"/>

<div class="container">
    <h2>authorization_code
        <small>用 'code' 换取 'access_token'</small>
    </h2>
    <br/>

    <div class="panel panel-default">
        <div class="panel-heading">步骤2: <code>用 'code' 换取 'access_token'</code></div>
        <div class="panel-body">
            <div ng-controller="CodeAccessTokenCtrl" class="col-md-10">

                <form action="#" th:action="@{'code_access_token'}" method="post" class="form-horizontal">
                    <input type="hidden" name="accessTokenUri" th:value="${accessTokenDto.accessTokenUri}"/>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">accessTokenUri</label>

                        <div class="col-sm-10">
                            <p class="form-control-static"><code
                                    th:text="${accessTokenDto.accessTokenUri}">http://....</code>
                                &nbsp;<a th:href="${accessTokenDto.accessTokenUri}" target="_blank">测试连接</a>
                            </p>

                            <p class="help-block">
                                authorizationUri value from Discovery-Endpoint 'token_endpoint'
                            </p>
                        </div>
                    </div>

                    <a href="javascript:void(0);" ng-click="showParams()">显示请求参数</a>

                    <div ng-show="visible">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">grant_type</label>

                            <div class="col-sm-10">
                                <input type="text" name="grantType" readonly="readonly"
                                       class="form-control" ng-model="grantType"/>

                                <p class="help-block">固定值 '<span th:text="${accessTokenDto.grantType}"></span>'</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">client_id</label>

                            <div class="col-sm-10">
                                <input type="text" name="clientId" required="required"
                                       class="form-control" ng-model="clientId" readonly/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">client_secret</label>

                            <div class="col-sm-10">
                                <input type="text" name="clientSecret" required="required"
                                       class="form-control" ng-model="clientSecret" readonly/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">code</label>

                            <div class="col-sm-10">
                                <input type="text" name="code" required="required" class="form-control"
                                       ng-model="code" readonly="readonly"/>

                                <p class="help-block">值是从 'myoidc-server' 返回的</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">redirect_uri</label>

                            <div class="col-sm-10">
                                <input type="text" name="redirectUri" class="form-control"
                                       required="required" size="50" ng-model="redirectUri" readonly/>

                                <p class="help-block">这一步的 'redirect_uri' 必须与上一步的 'redirect_uri' 一样</p>
                            </div>
                        </div>


                        <div class="well well-sm">
                            <span class="text-muted">最终获取 'access_token'的 URL:</span>
                            <br/>

                            <div class="text-primary">
                                {{accessTokenUri}}?client_id={{clientId}}&client_secret={{clientSecret}}&grant_type={{grantType}}&redirect_uri={{redirectUri}}&code={{code}}
                            </div>
                        </div>
                    </div>
                    <br/>
                    <br/>
                    <button type="submit" class="btn btn-primary">获取 access_token</button>
                    <span class="text-muted">后台将通过 RestTemplate 去获取 access_token</span> <span
                        class="label label-warning">POST</span>
                    <br/>
                    <small class="text-muted">
                        <em class="glyphicon glyphicon-info-sign"></em> 在实际应用中, 该步骤一般由后台代码完成,前端不需要表现.
                    </small>
                </form>

            </div>
        </div>
    </div>

    <script th:inline="javascript">
        var CodeAccessTokenCtrl = ['$scope', function ($scope) {
            $scope.accessTokenUri = [[${accessTokenDto.accessTokenUri}]];
            $scope.grantType = [[${accessTokenDto.grantType}]];
            $scope.clientId = [[${rpHoldDto.clientId}]];

            $scope.clientSecret = [[${rpHoldDto.clientSecret}]];
            $scope.code = [[${accessTokenDto.code}]];
            $scope.redirectUri = [[${host+'authorization_callback'}]];

            $scope.visible = false;

            $scope.showParams = function () {
                $scope.visible = !$scope.visible;
            };
        }];
    </script>

</div>


<hr/>
<div th:replace="fragment/footer :: footer-oidc"/>
</body>
</html>